<template>
	<view class="container">
		<custom_navbar :title="navbar_title" theme="light" />
		<u-empty v-if="punchList.length == 0"
		 icon="/static/images/no_punch.png"
		 mode="list" text="暂无打卡"
		 marginTop="120px"
		 ></u-empty>
		 
		  <view class="dataList">
			  <view class="dataBoxBlock" v-for="(info, index) in punchList" :key="index">
			  <view class="dataTitle">{{info.name}}</view>
			  <view class="dataBox" >
				  <view class="dataBoxLeft">
					  <view class="dian"></view>
				  </view>
				  <view class="dataBoxRight">
					 <view class="punch-item" v-for="(val, key) in info.points_list" :key="key"
					     :style="'background-image:url(/static/images/punch_bg.png)'">
					     <view class="item-top">
					         <image class="top-l" :src="ossurl(val.scenic_spot_points.face)" />
					         <view class="top-r">
					             <view class="top-title">{{ val.scenic_spot_points.title }}</view>
					             <view class="top-original">
					                 <text class="mr-10rpx">推荐打卡: </text>
					                 <image v-for="count in val.scenic_spot_points.grade" class="star" src="/static/images/star.png"></image>
					             </view>
					             <view class="top-btn top-btn-camera" @click="this.navigateTo(`/pagesB/photo/photo_step_3?spot_id=${info.spot_id}&points_id=${val.points_id}`)">
					                 <image class="top-img" src="@/static/images/camera.png" />
					                 与景点合影
					             </view>
					            <!-- <view class="top-btn" @click="toMap">
					                 <image class="top-img" src="../../static/images/go.png" />
					                 去这里
					             </view> -->
					         </view>
					     </view>
					     <view class="item-bottom">
					         {{ val.scenic_spot_points.description }}
					     </view>
					 </view>
				  </view>
			  </view>	  
			  </view>
		  </view>	  
		 
	</view>
</template>

<script>
	import { navigateTo, navigateBack } from "@/hooks";
	import { naviScenicSpotsClockList } from "@/api/home.js";
	import custom_navbar from "@/components/custom_navbar/index.vue";
    import { ossurl } from '@/utils/index';
	export default {
		components: { custom_navbar },
		data() {
			return {
				navigateTo,
				navbar_title: "景点打卡",
				curPage: 0,
				total: 0,
				punchList: [],
				spotId: 0
			}
		},
		computed: {
			rec_url() {
				return this.$store.getters.rec_url;
			}
		},
		onLoad(options) {
		    if (options.id) {
		        this.spotId = Number(options.id);
		    }
		    this.getPunchList();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			ossurl,
			loadMore() {
			    let isLoad = Math.ceil(this.total / 10) > this.curPage;
			    if (isLoad) {
			        this.getPunchList();
			    }
			},
			
			
			toPhoto(){
				
			},
			getPunchList() {
			    let params = {
			        // page: this.curPage + 1,
			        // limit: 10,
			        // spot_id: this.spotId
			    };
			    naviScenicSpotsClockList(params).then(res => {
			        if (res.code == 200) {
			            this.curPage = params.page;
			            this.total = res.data.total;
			            let datas = [...this.punchList];
			            if (res.data.length > 0 ) {
			                if (params.page > 1) {
			                    datas.push(...res.data)
			                } else {
			                    datas = res.data;
			                }
			                datas.map(item => {
							if (item.face) {
								item.face = this.rec_url + item.face;
							}
							return item;
						})
			            } else {
			                datas = [];
			            }
			            this.punchList = datas;
			        }
			    })
			}
		}
	}
</script>

<style lang="scss">
	 .container{padding:0rpx 20rpx;}
	 .dataList{width: 100%; height: auto;}	
	 .dataBoxBlock{ margin: 20rpx auto; width: 100%; height: auto;}
	 .dataTitle{
		 font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		 font-weight: 700;
		 font-size: 36rpx;
		 color: #3D3D3D;
		 line-height: 50rpx;
	 }
	 
	 .dataBox{width: 100%; height: 308rpx; display: flex;}
	 .dataBoxLeft{width: 28rpx; height: 308rpx; border-left: 2rpx dashed #0CCA92; }
	 .dian{width: 26rpx; height: 26rpx; border-radius: 50%; background-color:#0CCA92 ; margin-top: 146rpx; margin-left: -13rpx;}
	 .dataBoxRight{width: 700rpx; height: 308rpx;}

.punch-item {
    padding: 20rpx;
    margin-bottom: 24rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
    background: #FFFFFF;
    // background-image: url('../../static/images/punch.png');
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 24rpx;

    .item-top {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        .top-l {
            width: 260rpx;
            height: 168rpx;
            margin-right: 24rpx;
            border-radius: 12rpx;
        }

        .top-title {
            margin: 12rpx 0;
            font-weight: 700;
            font-size: 30rpx;
            color: #3D3D3D;
        }

        .top-original {
            margin-bottom: 20rpx;
            display: flex;
            font-size: 24rpx;
            color: #999;

            .star {
                width: 28rpx;
                height: 28rpx;
                margin-right: 4rpx;
            }
        }

        .top-btn {
            width: 182rpx;
            height: 52rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 700;
            font-size: 26rpx;
            color: #0CCA92;
            background: linear-gradient(-90deg, rgba(33, 188, 145, 0.2) 0%, rgba(183, 228, 71, 0.2) 100%);
            border-radius: 40rpx;

            .top-img {
                width: 32rpx;
                height: 32rpx;
                margin-right: 8rpx;

            }
        }

        .top-btn-camera {
            width: 232rpx;
            color: #fff;
            background: linear-gradient(-90deg, #0FBCD6 0%, #0CCA91 100%);
        }
    }

    .item-bottom {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

</style>
